<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filterFrom">
        <el-form-item>
          类别
          <el-select v-model="filterFrom.type">
            <el-option label="全部" value=""></el-option>
            <el-option label="开班审核" v-bind:value="1"></el-option>
            <el-option label="活动审核" v-bind:value="2"></el-option>
            <el-option label="身份认证审核" v-bind:value="3"></el-option>
            <el-option label="系统消息" v-bind:value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">确定</el-button>
        </el-form-item>
        <div class="pull-right">
          <el-button type="primary" icon="plus" @click="handleAdd">增加通知</el-button>
        </div>
      </el-form>
    </div>
    <div class="card-body card-padding">
      <el-table :data="tableData" style="width: 100%" v-loading="isLoading" border>
        <el-table-column prop="id" label="ID" width="70"></el-table-column>
        <el-table-column :formatter="typeFormatter" label="类别" width="100"></el-table-column>
        <el-table-column prop="uid" label="推送用户" width="100"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column label="操作" width="180">
          <template scope="scope">
            <el-button size="small" type="primary" @click="handldView(scope.row)">查看</el-button>
            <el-button size="small" type="warning" @click="handldDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <div style="float: left;margin-left: 20px;">
          <el-button type="text" @click="fetchData"><i class="zmdi zmdi-refresh" />&nbsp;&nbsp;重新加载</el-button>
        </div>
        <el-pagination :current-page="filterFrom.pnum" :page-sizes="[5, 10, 15, 20]" :page-size="filterFrom.records" layout="sizes, prev, pager, next, jumper,total" :total="totalRecords" @size-change="handleSizeChange" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="新增通知" v-model="showDialog" :close-on-click-modal="false">
      <el-form :model="curObject" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="curObject.title"></el-input>
        </el-form-item>
        <el-form-item label="推送用户ID">
          <el-input v-model="curObject.uid"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="curObject.type">
            <el-option label="开班审核" v-bind:value="1"></el-option>
            <el-option label="活动审核" v-bind:value="2"></el-option>
            <el-option label="身份认证审核" v-bind:value="3"></el-option>
            <el-option label="系统消息" v-bind:value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="curObject.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click.stop="handldSave">通 知</el-button>
      </div>
    </el-dialog>
    <el-dialog title="通知详情" v-model="viewDialog" :close-on-click-modal="false">
      <div class="info">
        <div class="info-block">
          <dl class="dl-horizontal">
            <dt>ID编号：</dt>
            <dd>{{curObject.id}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>通知用户ID：</dt>
            <dd>{{curObject.uid}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>是否查看：</dt>
            <dd>{{curObject.looked===1?"是":"否"}}</dd>
          </dl>
        </div>
        <div class="info-block">
          <dl class="dl-horizontal">
            <dt>标题：</dt>
            <dd>{{curObject.title}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>内容：</dt>
            <dd>{{curObject.content}}</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>创建时间：</dt>
            <dd>{{curObject.create_time}}</dd>
          </dl>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="viewDialog = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import API from '../../api'
  // import utils from '../../utils'

  var filterFrom = {
    type: '',
    pnum: 1,
    records: 10
  }

  export default {
    data: function () {
      return {
        curObject: {},
        showDialog: false,
        viewDialog: false,
        isLoading: false,
        tableData: [],
        totalRecords: 0,
        filterFrom,
        datePickerOption: {
          disabledDate: function (time) {
            return time.getTime() > Date.now()
          }
        }
      }
    },
    created: function () {
      this.fetchData()
    },
    methods: {
      handleSizeChange: function (val) {
        this.filterFrom.records = val
        this.fetchData()
      },
      handlePageChange: function (val) {
        this.filterFrom.pnum = val
        this.fetchData()
      },
      handleAdd: function () {
        this.showDialog = true
        this.curObject = {
          'id': '',
          'uid': '',
          'title': '',
          'content': '',
          'type': ''
        }
      },
      handldView: function (selectData) {
        API.messageDetail({id: selectData.id},
          (data) => {
            if (!data) return
            this.curObject = data
            this.viewDialog = true
          }
        )
      },
      handldSave: function () {
        API.messageSave(this.curObject,
          (data) => {
            if (!data) return
            this.fetchData()
            this.showDialog = false
          }
        )
      },

      handldDelete: function (selectData) {
        this.$confirm('你将删除该通知消息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.messageDelete({ id: selectData.id },
            (data) => {
              if (!data) return
              this.fetchData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },

      fetchData: function () {
        this.isLoading = true
        API.messageList(this.filterFrom,
          (data) => {
            this.isLoading = false
            if (!data) return
            this.tableData = data.list
            this.totalRecords = data.totalRecords
          }
        )
      },
      typeFormatter: function (row) {
        switch (row.type) {
          case 1: return '开班审核'
          case 2: return '活动审核'
          case 3: return '身份认证审核'
          case 4: return '系统消息'
          default: return ''
        }
      }
    }
  }

</script>

<style scoped>
  dt {
    font-weight: normal
  }
  
  .titleImage {
    height: 86px;
    width: 116px;
  }
  
  .uploader {
    height: 90px;
    width: 120px;
    border-radius: 3px;
    border: 2px solid #eee;
    text-align: center;
    color: #4db3ff;
  }
  
  .uploader:hover {
    border: 2px solid #4db3ff;
    cursor: pointer;
  }
  
  .uploader-icon {
    margin-top: 30px;
    font-size: 25px;
  }

</style>
